<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.util.List"%>
<%@page import="models.Course"%>
<%@page import="models.User"%>
<%@page import="service.UserDao"%>
<%@page import="org.hibernate.Session"%>
<%@page import="service.HibernateUtil"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link href="style/tutor.css" type="text/css" rel="Stylesheet">
        <!-- include jQuery Library From Google Code -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            $(document).ready(function(){                
                function queryCourses(){
                    var id = $("#categoryList").val();
                    if(id != null){
                        window.location = "/course?id="+id;
                    }
                }
                $("#categoryList").bind("change", queryCourses);
                function queryDetails(){
                    var id = $("#courseList").val();
                    if(id != null){
                        window.location = "/course?courseID="+id;
                    }
                }
                $("#courseList").bind("change", queryDetails);

            });
            
            function addTeacher(){
                var teachers = document.getElementById("teacher");
                var hiddenField = document.getElementById("teacherArray");
                var teacherList = document.getElementById("teacherList");
                var option;
                option = teacherList.options[teacherList.selectedIndex];
                var check = false;
                
                //controleer of de geselecteerde teacher niet al gekoppeld is aan cursus
                for (var i=0; i<teachers.length; i++){
                    if(teachers.options[i].value==option.value){
                        check=true;
                    }
                }
                
                if(option.text==""){
                    check=true;
                }
                
                if(check!=true){
                    teachers.appendChild(option);
                    hiddenField.value = hiddenField.value + option.value + ";";
                }else{
                    alert("Error! Or you're trying to add an empty value, or a teacher who's already selected");
                }   
            }
        </script>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <jsp:useBean id="inhoud" scope="application" class="models.Bean" />   
        <jsp:setProperty name="inhoud" property="language" value="<%= models.Bean.getLanguage() %>" />
        
        <title>
            Three 2 Learn
        </title>
    </head>
    <body>       
        <div id="wrapper">
            <jsp:include page="adminSidebar.jsp"/>
            <div id="right">               
                <h1>
                    <jsp:setProperty name="inhoud" property="key" value="ManageCourses" />
                    <jsp:getProperty name="inhoud" property="key" />
                </h1>
                <h2>
                    <jsp:setProperty name="inhoud" property="key" value="ChooseACategory" />
                    <jsp:getProperty name="inhoud" property="key" />
                </h2>
                <div class="box">
                    <select id="categoryList" multiple="multiple" style="width:240px; height:140px">
                        <c:choose>
                            <c:when test="${not empty categories}">
                                <c:forEach var="tempCategory" items="${categories}">
                                    <option value="${tempCategory.categoryID}">${tempCategory.name}</option>
                                </c:forEach>
                            </c:when>
                        </c:choose>
                    </select>
                    <div id="coursesContainer">
                        <h2>
                            <jsp:setProperty name="inhoud" property="key" value="ChooseACourseToEdit" />
                            <jsp:getProperty name="inhoud" property="key" />
                        </h2>
                        <select id="courseList" multiple="multiple" style="width:240px; height:140px">
                            <c:choose>
                                <c:when test="${not empty coursesOfCategory}">
                                    <c:forEach var="tempCourse" items="${coursesOfCategory}">
                                        <option value="${tempCourse.courseID}">${tempCourse.name}</option>
                                    </c:forEach>
                                </c:when>
                            </c:choose>
                        </select>
                    </div>
                </div>
                <div class="box">
                    <div id="settings">
                        <form name="infoform" action="/course" method="post">
                            <table id="settingstable">
                                <th colspan="3">
                                    <jsp:setProperty name="inhoud" property="key" value="AddEditCourse" />
                                    <jsp:getProperty name="inhoud" property="key" />
                                </th>
                                <tr>
                                    <td>
                                        <jsp:setProperty name="inhoud" property="key" value="Name" />
                                        <jsp:getProperty name="inhoud" property="key" />
                                        :</td>
                                    <td colspan="2"><input required="required" size="50px"title="Enter course name" id="name" name="name" value="${selectedCourse.name}" type="text" /></td>
                                </tr>
                                <tr>
                                    <td>
                                        <jsp:setProperty name="inhoud" property="key" value="Language" />
                                        <jsp:getProperty name="inhoud" property="key" />
                                        :</td>
                                    <td colspan="2" >
                                        <c:if test="${not empty selectedCourse}">
                                            <jsp:setProperty name="inhoud" property="key" value="Currently" />
                                            <jsp:getProperty name="inhoud" property="key" />
                                            : ${selectedCourse.language} </br>
                                            <jsp:setProperty name="inhoud" property="key" value="ChangeTo" />
                                            <jsp:getProperty name="inhoud" property="key" />
                                            :
                                        </c:if>

                                        <select id="language" name="language">
                                            <option required="required" value="English">
                                                <jsp:setProperty name="inhoud" property="key" value="English" />
                                                <jsp:getProperty name="inhoud" property="key" />
                                            </option>
                                            <option value="Dutch">
                                                <jsp:setProperty name="inhoud" property="key" value="Dutch" />
                                                <jsp:getProperty name="inhoud" property="key" />
                                            </option>
                                        </select></td>
                                </tr>
                                <tr>
                                    <td>
                                        <jsp:setProperty name="inhoud" property="key" value="StartDate" />
                                        <jsp:getProperty name="inhoud" property="key" />
                                        :</td>

                                    <td colspan="2"><input required="required" title="Enter start date" id="startDate" size="50px" name="startDate" value="${startDate}" type="text" /></td>
                                </tr>
                                <tr>
                                    <td>
                                        <jsp:setProperty name="inhoud" property="key" value="EndDate" />
                                        <jsp:getProperty name="inhoud" property="key" />
                                        :</td>
                                    <td colspan="2"><input required="required" title="Enter end date" id="endDate" size="50px" name="enDate" value="${endDate}" type="text" /></td>
                                </tr>

                                <tr>
                                    <td>
                                        <jsp:setProperty name="inhoud" property="key" value="Category" />
                                        <jsp:getProperty name="inhoud" property="key" />
                                        :</td>
                                    <td colspan="2">
                                        <c:if test="${not empty category}">
                                            <jsp:setProperty name="inhoud" property="key" value="Currently" />
                                            <jsp:getProperty name="inhoud" property="key" />: ${category.name} </br>
                                            <jsp:setProperty name="inhoud" property="key" value="ChangeTo" />
                                            <jsp:getProperty name="inhoud" property="key" />:
                                        </c:if>
                                        <select id="category" required="required" name="category">

                                            <c:choose>
                                                <c:when test="${not empty categories}">
                                                    <c:forEach var="tempCategory" items="${categories}">
                                                        <option value="${tempCategory.categoryID}">${tempCategory.name}</option>
                                                    </c:forEach>
                                                </c:when>
                                            </c:choose>
                                        </select></td>
                                </tr>
                                <tr>
                                    <td>
                                        <jsp:setProperty name="inhoud" property="key" value="Price" />
                                        <jsp:getProperty name="inhoud" property="key" />
                                        :</td>
                                    <td colspan="2"><input required="required" title="Enter course price" size="50px" id="price" name="price" type="text" value="${selectedCourse.price}" /></td>
                                </tr>
                                <tr>
                                    <td>
                                        <jsp:setProperty name="inhoud" property="key" value="ShortDescription" />
                                        <jsp:getProperty name="inhoud" property="key" />
                                        :</td>
                                    <td colspan="2"><input required="required" title="Enter short description" size="50px" id="description" name="description" type="text" value="${selectedCourse.description}" /></td>
                                </tr>
                                <tr>
                                    <td>
                                        <jsp:setProperty name="inhoud" property="key" value="Teacher" />
                                        <jsp:getProperty name="inhoud" property="key" />
                                        :</td>
                                    <td>
                                        <select id="teacher" name="teacher" multiple="multiple" style="width:240px; height:140px">
                                            <c:if test="${not empty courseTeachers}">
                                                <c:forEach var="tempTeacher" items="${courseTeachers}">
                                                    <option value="${tempTeacher.userID}">${tempTeacher.firstName} ${tempTeacher.lastName}</option> 
                                                </c:forEach>
                                            </c:if>
                                        </select>
                                    </td>
                                    <td>
                                        <select id="teacherList" name="teacherList">
                                            <c:choose>
                                                <c:when test="${not empty teachers}">
                                                    <c:forEach var="tempTeacher" items="${teachers}">
                                                        <option selected="selected" value="${tempTeacher.userID}" >${tempTeacher.firstName} ${tempTeacher.lastName}</option>
                                                    </c:forEach>
                                                </c:when>
                                            </c:choose>
                                        </select><br><button type='button' onclick="addTeacher();">
                                            <jsp:setProperty name="inhoud" property="key" value="Add" />
                                            <jsp:getProperty name="inhoud" property="key" />
                                        </button></td>

                                <input id="teacherArray" size="50px" name="teacherArray" type="hidden" value="<c:forEach var="courseTeacher" items="${courseTeachers}">${courseTeacher.userID};</c:forEach>" />

                                </tr>
                                <tr>
                                    <c:choose>
                                        <c:when test="${courseID == null}">
                                            <td colspan="3"><input type="submit" value="Add" /></td>
                                        </tr>
                                    </table>
                                </form>
                            </c:when>
                            <c:otherwise>
                                <input type="hidden" name="id" value="${courseID}"/>
                                <td><input type="submit" value="Update" /></td>
                                </form>
                                    <td colspan="2"><a href="/delete?id=${courseID}">delete</a></td>
         
                                
                                </tr>

                                </table>
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>